<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        #app{
            width: 600px;
            margin: 150px auto;
            padding: 40px;
        }
    </style>
</head>

<body>

<div id="app">
    <el-form :model="loginInfo" :rules="rules" status-icon  ref="loginInfo" label-width="100px" class="demo-ruleForm">
        <el-form-item label="账号" prop="username">
            <el-input type="text" autocomplete="off" v-model="loginInfo.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input type="password" autocomplete="off" v-model="loginInfo.password"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="login()">提交</el-button>
            <el-button @click="reset()">重置</el-button>
        </el-form-item>
    </el-form>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            loginInfo: {},
            rules: {
                username: [
                    {
                        required: true,
                        message: '请输入账号',
                        trigger: 'blur'
                    },
                    {
                        min: 2,
                        max: 10,
                        message: '长度在 2到10 个字符',
                        trigger: 'blur'
                    }
                ],
                password: [
                    {
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur'
                    },
                    {
                        min: 2,
                        max: 10,
                        message: '长度在 2到10 个字符',
                        trigger: 'blur'
                    }
                ]
            },
        },
        methods: {
                login:function (){
                    this.$refs["loginInfo"].validate((valid) => {
                        if (valid) {
                            //发送ajax请求到后台
                            $.post("/ssm/emp/login",app.loginInfo,function (backData){
                                if(backData.code==200){
                                    window.location.href="main.html"
                                }else{
                                    app.$message.error(backData.msg);
                                }

                            });
                        }
                    });
                },
                reset:function (){
                    this.$refs["loginInfo"].resetFields();
                }
            }

    });
</script>
</body>
</html>